import React, { Component } from 'react'
import moment from 'moment'
import {Table, Popover, Icon, Alert, Row, Col} from 'antd'
import Info from 'components/info'
import Condition from 'components/condition'
import { messages } from "share/common";
import ResizeTable from "components/resize-table";
import ResignationMark from 'components/template/slide-document/resignation-mark'

import UserMale from "images/user-male.png";
import UserFemale from "images/user-female.png";
import UserUnknow from "images/user-unknow.png";
const If = Condition.If;

class SlideDocumentApplicantDetail extends Component {

  attributes = [
    {title: messages('common-1.key244')/*邮箱*/, dataIndex: 'email', span: 12},
    {title: messages('common-1.key243')/*手机*/, dataIndex: 'mobile', span: 12},
    {title: messages('common-1.key559')/*直属领导*/, dataIndex: 'directManagerName', span: 12},
    {title: messages('common-1.key560')/*人员类型*/, dataIndex: 'employeeType', span: 12},
    {title: messages('common-1.key561')/*性别*/, dataIndex: 'gender', span: 12},
    {title: messages('common-1.key562')/*生日*/, dataIndex: 'birthday', span: 12},
    {title: messages('common-1.key563')/*入职时间*/, dataIndex: 'entryTime', span: 12}
  ];

  userImg = {
    0: UserMale,
    1: UserFemale,
    2: UserUnknow
  };

  getCustomFields = () => {
    const { applicant } = this.props;
    let customFields = [];
    (applicant.customFormValues || []).map(item => {
      customFields.push({ title: item.fieldName, dataIndex: item.fieldOID, span: 12 })
    });
    return customFields;
  };

  getInfoData = () => {
    const { applicant } = this.props;
    let infoData = {};
    this.attributes.map(item => {
      let value = applicant[item.dataIndex];
      if (item.dataIndex === 'birthday' || item.dataIndex === 'entryTime') {
        infoData[item.dataIndex] = value ? moment(value).format('YYYY-MM-DD') : '-';
      } else {
        infoData[item.dataIndex] = value || '-';
      }
    });
    //个人信息扩展字段
    (applicant.customFormValues || []).map(item => {
      let fieldShowValue = '';
      switch(item.messageKey) {
        case 'image':
          if (item.attachmentImages && item.attachmentImages.length) {
            fieldShowValue = item.attachmentImages.map(image =>
              <Popover content={<img src={image.thumbnailUrl} />}>
                <img src={image.thumbnailUrl} style={{ marginRight: 7, width: 20, height: 20 }}/>
              </Popover>
            );
          }
          break;
        case 'date':
        case 'common.date':
          fieldShowValue = item.value ? (new Date(item.value)).format("yyyy-MM-dd") : "-";
          break;
        case 'time':
          if (item.value) {
            fieldShowValue = moment(item.value, 'HH:mm').format("HH:mm");
            //兼容以前的
            if (item.value.length > 5) {
              fieldShowValue = moment(item.value).format("HH:mm");
            }
          }
          break;
        case 'number':
          item.unit = "";
          if (item.fieldContent) {
            let content = {};
            try {
              content = JSON.parse(item.fieldContent);
            } catch (e) {}
            item.unit = content.unit;
          }
          fieldShowValue = item.value ? `${item.value} ${item.value ? item.unit : ""}` : '-';
          break;
        case 'cust_list':
          fieldShowValue = item.name;
          break;
        default:
          fieldShowValue = item.showValue || item.value;
      }
      infoData[item.fieldOID] = fieldShowValue || '-';
    });
    return infoData;
  };

  jobMessage = (
    <div>
      {messages('common-1.key564')/*员工在同一个公司下担任多个岗位时，必须有且仅有一个主岗。*/}
    </div>
  );

  columns = [{
    title: messages('common-1.key423')/*公司*/,
    dataIndex: 'companyName',
    render: value => value ? <Popover placement="topLeft" content={value}>{value}</Popover> : '-'
  }, {
    title: messages('common.department')/*部门*/,
    dataIndex: 'departmentName',
    render: value => value ? <Popover placement="topLeft" content={value}>{value}</Popover> : '-'
  }, {
    title: messages('common-1.key565')/*职位*/,
    dataIndex: 'position',
    render: value => value ? <Popover placement="topLeft" content={value}>{value}</Popover> : '-'
  }, {
    title: messages('common-1.key566')/*职务*/,
    dataIndex: 'duty',
    render: value => value ? <Popover placement="topLeft" content={value}>{value}</Popover> : '-'
  }, {
    title: messages('common-1.key567')/*级别*/,
    dataIndex: 'rank',
    render: value => value ? <Popover placement="topLeft" content={value}>{value}</Popover> : '-'
  }, {
    title: messages('common-1.key434')/*主岗*/,
    dataIndex: 'companyMainPosition',
    render: value => value ? (
      <Popover placement="topLeft" content={messages('common-1.key434')/*主岗*/}>
        {messages('common-1.key434')/*主岗*/}
      </Popover>
    ) : '-'
  }];

  render() {
    const { applicant } = this.props;
    return (
      <div className='slide-document-applicant-detail'>
        <div className='slide-document-applicant-detail-applicant'>
          <img
            src={applicant.avatar || this.userImg[applicant.genderCode || 2]}
            className='slide-document-applicant-detail-applicant-avatar'
          />
          <Row className='slide-document-applicant-detail-applicant-base'>
            <Col span={24}>
              {applicant.fullName}
              <ResignationMark applicant={applicant}/>
            </Col>
          </Row>
          <div className='slide-document-applicant-detail-applicant-info-row'>
            {messages('common.user.id')/*工号*/}：
            <span>{applicant.employeeID}</span>
          </div>
        </div>
        <Info
          attributes={this.attributes.concat(...this.getCustomFields())}
          dataSource={this.getInfoData()}
        />
        <div style={{ marginTop: 12 }}>
          <h3>{messages('common-1.key568')/*岗位信息*/}</h3>
          <Alert message={this.jobMessage} type="info" style={{ margin: '12px 0' }} />
        </div>
        <ResizeTable
          showUtils
          tableName="expense-audit-job-table"
          rowKey="id"
          columns={this.columns}
          dataSource={applicant.userJobsDTOs || []}
          pagination={false}
          bordered
        />
      </div>
    )
  }
}

export default SlideDocumentApplicantDetail;
